<template>
  <div>
    <div class="base-info">
      <div class="base-info-padding background-white">
        <p class="title">账号信息</p>
        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">单位logo：</span>
            </el-col>
            <el-col :span="21">
              <div class="server-logo">
                <img src="../../../assets/img/server_logo.png" height="110" width="110"/>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">机构名称:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">贵州通达智慧信息技术有限公司</span>
            </el-col>
          </el-row>
        </div>

        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">单位负责人姓名:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">罗国归</span>
            </el-col>
          </el-row>
        </div>

        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">所属地区:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">贵州省贵阳市花溪区</span>
            </el-col>
          </el-row>
        </div>

        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">手机号:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">13158094014</span>
            </el-col>
          </el-row>
        </div>

        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">邮箱:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">474791480@qq.com</span>
            </el-col>
          </el-row>
        </div>


      </div>

      <div class="base-info-padding background-white margin-top-16">
        <p class="title">服务商基本信息</p>
        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">机构logo：</span>
            </el-col>
            <el-col :span="21">
              <div class="server-logo">
                <img src="../../../assets/img/server_logo.png" height="110" width="110"/>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">机构名称:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">贵州通达智慧信息技术有限公司</span>
            </el-col>
          </el-row>
        </div>

        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">所属地区:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">贵州省贵阳市花溪区</span>
            </el-col>
          </el-row>
        </div>
        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">单位类型：</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">xxxxx</span>
            </el-col>
          </el-row>
        </div>

        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">单位性质:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">xxxx</span>
            </el-col>
          </el-row>
        </div>

        <div class="margin-18">
          <div class="person-info">
            <p class="title">单位负责人信息</p>
            <div class="margin-18">
              <el-row :gutter="20">
                <el-col :span="3">
                  <span class="first-left">负责人姓名:</span>
                </el-col>
                <el-col :span="21">
                  <span class="second-right">陈强勇</span>
                </el-col>
              </el-row>
            </div>
            <div class="margin-18">
              <el-row :gutter="20">
                <el-col :span="3">
                  <span class="first-left">负责人身份证号码:</span>
                </el-col>
                <el-col :span="21">
                  <span class="second-right">555555555555555555</span>
                </el-col>
              </el-row>
            </div>
            <div class="margin-18">
              <el-row :gutter="20">
                <el-col :span="3">
                  <span class="first-left">负责人联系电话:</span>
                </el-col>
                <el-col :span="21">
                  <span class="second-right">11111111111</span>
                </el-col>
              </el-row>
            </div>
            <div class="margin-18">
              <el-row :gutter="20">
                <el-col :span="3">
                  <span class="first-left">身份证正反面:</span>
                </el-col>
                <el-col :span="21">
                  <div class="server-logo">
                    <img src="../../../assets/img/server_logo.png" height="110" width="110"/>
                    <img src="../../../assets/img/server_logo.png" height="110" width="110"/>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'

  export default {
    layout: 'frame',
    name: "index",

    data() {
      return {}
    },
    created() {
      this.SetIsShowBread(true);  //设置面包屑导航是否显示

      //面包屑显示后内容
      if (this.isShowBread) {
        this.SetCurrentPath({url: '/', title: '基础信息'});
      }
    },
    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),
    },
    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread', 'SetCurrentPath'
      ]),
    },

  }
</script>

<style scoped lang="scss">
  .margin-top-16 {
    margin-top: 16px;
  }

  .base-info {

    .base-info-padding {
      padding: 24px 0 22px 15px;

      .title {
        font-size: 16px;
        color: #333333;
      }

      .margin-18 {
        margin-top: 18px;

        .server-logo {
          img {
            height: 64px;
            width: 64px;
          }
        }

        .first-left {
          font-size: 14px;
          color: #666666;
        }

        .second-right {
          font-size: 14px;
          color: #333333;
        }

        .person-info {
          padding-top: 18px;
          border-top: 1px solid #f2f2f2;
        }
      }
    }
  }
</style>
